<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" title="订单详情" :background="navbarBackground"></u-navbar>
		<view class="main" :class="order.status == 1 ? 'main-active' : ''">
			<view class="top">
				<!-- 待付款 -->
				<u-icon v-show="order.status == 1" size="120" name="clock-fill"></u-icon>
				<text v-show="order.status == 1" class="top-title">等待付款</text>
				<!-- 待消费 -->
				<u-icon v-show="order.status == 2 || order.status == 3" size="120" name="more-circle-fill"></u-icon>
				<text v-show="order.status == 2 || order.status == 3" class="top-title">等待核销</text>
				<!-- 待消费 -->
				<u-icon v-show="order.status == 4" size="120" name="checkmark-circle-fill"></u-icon>
				<text v-show="order.status == 4" class="top-title">核销成功</text>
				<!-- 已完成 -->
				<u-icon v-show="order.status == 5" size="120" name="checkmark-circle"></u-icon>
				<text v-show="order.status == 5" class="top-title">交易完成</text>
			</view>
			<!-- 服务评价 -->
			<view class="comment" v-if="order.status == 5">
				<view class="label"><text>服务评价</text></view>
				<view class="comment-content">
					<u-rate v-model="order.comment" :disabled="true" size="50" :gutter="50" active-color="#E3AD3B"></u-rate>
					<text v-show="order.comment == 1">差</text>
					<text v-show="order.comment == 2">一般</text>
					<text v-show="order.comment == 3">还行</text>
					<text v-show="order.comment == 4">满意</text>
					<text v-show="order.comment == 5">非常满意</text>
				</view>
			</view>
			<!-- 地址信息 -->
			<view class="address">
				<view class="label"><text>收货信息</text></view>
				<view class="adr">
					<view class="adr-top">
						<text class="name">{{ order.order_name || '' }}</text>
						<text class="phone">{{ order.order_mobile || '' }}</text>
					</view>
					<view class="adr-bottom">{{ order.order_address || '' }}</view>
				</view>
			</view>
			<!-- 商品 -->
			<view class="goods" v-if="order">
				<view class="item-card" v-for="(item, index) in order.goods" :key="index">
					<u-image width="35vw" height="180" border-radius="10" :src="item.cover && item.cover"></u-image>
					<view class="card-right">
						<text class="name">{{ item.title }}</text>
						<view class="jg">
							<text>{{ '￥' + item.present_price || '' }}</text>
							<text class="un-price">{{ '￥' + item.origin_price || '' }}</text>
						</view>
						<view class="on-price">
							<view class="price">
								<text class="symbol">定金￥</text>
								<text>{{ item.deposit_price }}</text>
							</view>
							<text class="count">{{ 'x' + item.num || '' }}</text>
						</view>
					</view>
				</view>
				<view class="total" v-if="order.status !== 1 && order.status !== 5">
					<text>订单金额：</text>
					<text>{{ '￥' + order.total_price }}</text>
				</view>
			</view>
			<!-- 门店 -->
			<view class="store">
				<view class="store-title"><text>门店信息</text></view>
				<view class="store-info">
					<view class="store-info-item">
						<text class="store-info-item-title">门店地址</text>
						<text class="store-info-item-sub" v-if="order.goods">{{ order.goods[0].store_address || '' }}</text>
					</view>
					<view class="store-info-item">
						<text class="store-info-item-title">商家电话</text>
						<text class="store-info-item-sub" v-if="order.goods">{{ order.goods[0].store_mobile || '' }}</text>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="store">
				<view class="store-title"><text>订单信息</text></view>
				<view class="store-info">
					<view class="store-info-item">
						<text class="store-info-item-title">订单编号</text>
						<text class="store-info-item-sub">{{ order.order_sn || '' }}</text>
					</view>
					<view class="store-info-item" v-if="order.status !== 1">
						<text class="store-info-item-title">支付方式</text>
						<text class="store-info-item-sub" v-show="order.pay_type && order.pay_type == 1">{{ order.pay_type == 1 ? '微信支付' : '' }}</text>
						<text class="store-info-item-sub" v-show="order.pay_type && order.pay_type == 2">{{ order.pay_type == 2 ? '支付宝支付' : '' }}</text>
						<text class="store-info-item-sub" v-show="order.pay_type && order.pay_type == 3">{{ order.pay_type == 3 ? '余额支付' : '' }}</text>
					</view>
					<view class="store-info-item" v-if="order.status == 5">
						<text class="store-info-item-title">支付金额</text>
						<text class="store-info-item-sub">{{ '￥' + order.total_price || '' }}</text>
					</view>
					<view class="store-info-item">
						<text class="store-info-item-title">提交时间</text>
						<text class="store-info-item-sub">{{ order.create_time || '' }}</text>
					</view>
					<view class="store-info-item" v-if="order.status == 4 || order.status == 5">
						<text class="store-info-item-title">核销时间</text>
						<text class="store-info-item-sub">{{ order.receipt_time || '' }}</text>
					</view>
					<view class="store-info-item" v-if="order.status !== 1">
						<text class="store-info-item-title">备注内容</text>
						<text class="store-info-item-sub">{{ order.remarks || '' }}</text>
					</view>
				</view>
			</view>
			<!-- 操作 -->
			<view v-if="order.status == 1" class="fixed">
				<view class="left">
					<text>实付定金：</text>
					<text class="price">{{ '￥' + allPrice }}</text>
				</view>
				<view><u-button :hair-line="false" :ripple="true" ripple-bg-color="#8EB7FA" :custom-style="btnStyle" @click="showPay = true">立即付款</u-button></view>
			</view>
			<!-- 操作 -->
			<view v-if="order.status == 4" class="order-btn">
				<u-button shape="circle" :ripple="true" ripple-bg-color="#8EB7FA" :custom-style="custom" @click="handleComment(order.id)">立即评价</u-button>
			</view>
			<view v-if="order.status == 2" class="order-btn">
				<u-button shape="circle" :ripple="true" ripple-bg-color="#8EB7FA" :custom-style="custom" @click="handleWriteOff(order.id)">立即核销</u-button>
			</view>
			<view v-if="order.status == 5" class="order-btn">
				<u-button shape="circle" :ripple="true" ripple-bg-color="#8EB7FA" :custom-style="custom" @click="handleBack">回到首页</u-button>
			</view>
			<!-- 选择支付方式 -->
			<u-popup v-if="order.status == 1" v-model="showPay" mode="center" border-radius="15" :closeable="true">
				<view class="pay">
					<view class="pay-title">选择支付方式</view>
					<view class="pay-list">
						<view class="pay-item" :class="currentPay == 0 ? 'pay-active' : ''" @click="handleSubmit(0)">
							<u-image width="60" height="60" :src="require('../../../../static/image/qb.png')"></u-image>
							<text>余额支付</text>
							<text class="money">{{ `(余额:￥${money})` }}</text>
						</view>
						<view class="pay-item" :class="currentPay == 1 ? 'pay-active' : ''" @click="handleSubmit(1)">
							<u-image width="60" height="60" :src="require('../../../../static/image/wechat.png')"></u-image>
							<text>微信支付</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			custom: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1',
				margin: '0',
				fontSize: '1rem',
				borderRadius: '0',
				border: 'none',
				padding: '48rpx 50rpx'
			},
			showPopup: false,
			showPay: false,
			currentPay: '', // 支付方式
			current: 0,
			order: {},
			goods: [], // 已选商品
			remark: '', // 备注
			order_id: '',
			money: '' // 余额
		};
	},
	onLoad(option) {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		if (option) {
			this.order_id = option.id;
			this.getOrderInfo();
		}
		// 获取用户余额
		this.$tkRequest('/api/User/userInfo').then(res => {
			this.money = res.data.money;
		});
	},
	methods: {
		getOrderInfo(id) {
			this.$tkRequest(
				'/api/Orders/getInfo',
				{
					id: this.order_id
				},
				'POST'
			).then(res => {
				this.order = res.data;
			});
		},
		// 选择地址
		handleChoose(item, index) {
			this.current = index;
			this.currentAdr = item;
			this.showPopup = false;
		},
		// 立即付款
		handleSubmit(index) {
			this.currentPay = index;
			switch (index) {
				// 余额支付
				case 0:
					uni.showLoading({
						title: '正在支付...'
					});
					this.$tkRequest('/api/Orders/balancePay', {
						order_id: this.order_id
					}).then(res => {
						uni.showToast({
							title: res.msg
						});
						this.showPay = false;
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					});
					break;
				case 1:
					// 小程序支付
					// #ifdef MP-WEIXIN
					this.$tkRequest(
						'/api/Wxpay/wxpay',
						{
							order_id: this.order_id
						},
						'POST'
					).then(res => {
						let result = res.data;
						if (result) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {},
								appId: result.appId,
								nonceStr: result.nonceStr,
								package: result.package,
								paySign: result.paySign,
								signType: result.signType,
								timeStamp: result.timeStamp,
								success: function(res) {
									uni.navigateBack();
								}
							});
						}
					});
					// #endif
					// APP 支付
					// #ifdef APP-PLUS
					this.$tkRequest(
						'/api/pay/payByWeChat',
						{
							order_id: this.order_id
						},
						'POST'
					).then(res => {
						let result = res.data.config;
						if (result) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {
									appid: result.appid,
									noncestr: result.noncestr,
									package: result.package,
									partnerid: result.partnerid,
									prepayid: result.prepayid,
									timestamp: result.timestamp,
									sign: result.sign
								},
								success: function(res) {
									uni.navigateBack();
								}
							});
						}
					});
					// #endif
					// H5支付
					// #ifdef H5
					this.$tkRequest(
						'/api/Wxpay/wxpay',
						{
							order_id: this.order_id
						},
						'POST'
					).then(res => {
						let result = res.data;
						if (result) {
							this.$nextTick(() => {
								this.$wxPay(result);
								this.getOrderInfo(this.order_id);
							});
						}
					});
					// #endif
					break;
			}
		},
		// 立即核销
		handleWriteOff(id) {
			this.$tkRequest('/api/Orders/receipt', {
				id: id
			}).then(res => {
				uni.showToast({
					title: res.msg
				});
				this.getOrderInfo();
			});
		},
		// 评价
		handleComment(id) {
			uni.navigateTo({
				url: `../reviews/reviews?id=${id}`
			});
		},
		handleBack() {
			uni.switchTab({
				url: '../../../index/index'
			});
		}
	},
	computed: {
		// 计算总价
		allPrice: function() {
			if (this.order !== null) {
				let itemPrice = this.order.goods.map(item => {
					return item.deposit_price * item.num;
				});
				return itemPrice.reduce((a, b) => a + b);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main-active {
	padding-bottom: 100rpx;
}
.main {
	scroll-view {
		max-height: 100vh;
	}

	.top {
		width: 100%;
		padding: 50rpx 0 $uni-spacing-col-lg 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-image: linear-gradient(90deg, rgb(27, 52, 92), rgb(49, 84, 142));
		color: #f1f1f1;

		.top-title {
			font-size: 1rem;
			letter-spacing: 5rpx;
			padding: $uni-spacing-col-lg 0;
		}
	}

	.comment {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin-bottom: $uni-spacing-col-base;
		background-color: #fff;

		.label {
			padding-bottom: $uni-spacing-col-lg;
			font-size: 12pt;
		}

		.comment-content {
			display: flex;
			align-items: center;
			color: #999;
		}
	}

	.address {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		background-color: #fff;

		.label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 12pt;
		}

		.adr {
			padding: $uni-spacing-col-lg 0;

			.adr-top {
				.name {
					font-size: 1rem;
				}

				.phone {
					font-size: 10pt;
					color: #999;
					padding: 0 $uni-spacing-row-base;
				}
			}

			.adr-bottom {
				padding-top: $uni-spacing-col-lg;
				font-size: 11pt;
			}
		}
	}

	.goods {
		padding-top: $uni-spacing-col-base;

		.total {
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			background-color: #fff;
			font-size: 11pt;
			color: #3d6fc1;

			text:last-child {
				font-size: 1.1rem;
			}
		}

		.item-card {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;

			&:last-child {
				border: none;
			}

			.card-right {
				flex: 1;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: $uni-spacing-row-sm;
				overflow: hidden;

				.name {
					font-size: 1rem;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
				}

				.jg {
					display: flex;
					align-items: center;

					.un-price {
						padding-left: 15rpx;
						font-size: 9pt;
						text-decoration: line-through;
						color: #999;
					}
				}

				.on-price {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: #eab952;
						font-size: 1rem;

						.symbol {
							font-size: 10pt;
						}
					}
				}

				.count {
					font-size: 11pt;
					color: #aaa;
				}
			}
		}
	}

	.fixed {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: $uni-spacing-row-lg;
		border-top: 1rpx solid #eee;

		.left {
			.price {
				font-size: 1rem;
				color: #eab952;
			}
		}
	}

	.store {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		margin: $uni-spacing-col-base 0;
		background-color: #fff;

		.store-title {
			font-size: 1rem;
		}

		.store-info {
			padding-top: $uni-spacing-col-base;

			.store-info-item {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-base 0;

				.store-info-item-title {
					width: 20vw;
					color: #999;
				}

				.store-info-item-sub {
					flex: 1;
				}
			}
		}
	}

	.order-btn {
		padding: 0 $uni-spacing-row-lg 40rpx $uni-spacing-row-lg;
	}

	.pay {
		width: 80vw;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;

		.pay-title {
			padding-bottom: $uni-spacing-col-lg;
			font-size: 12pt;
		}

		.pay-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: $uni-spacing-col-lg 0;

			.pay-item {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				margin: $uni-spacing-col-sm;
				border: 1rpx solid #eee;
				border-radius: 15rpx;
				width: 100%;
				white-space: nowrap;

				.money {
					font-size: 10pt;
					color: #999;
				}

				text {
					padding-left: $uni-spacing-row-base;
					font-size: 12pt;
				}
			}

			.pay-active {
				border-color: #4cd964;
				background-color: #f7fcf7;
			}
		}
	}
}
</style>
